<template>
	<view class="paper-edit">
		<!-- <u-navbar leftIcon=" " :title="kitchenData.billtypeId === 1 ? '编辑结账单模板' : '编辑厨打单模板'" :placeholder="true" /> -->
		<view class="title">店内点单</view>
		<scroll-view scroll-y class="edit-info">
			<view class="bg">
				<lai-cell title="门店名称" is-switch v-model="kitchenData.showStoreName"></lai-cell>
				<lai-cell v-if="kitchenData.showStoreName" title="字号大小" is-radio v-model="kitchenData.storeNameSize" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="就餐方式" is-switch v-model="kitchenData.showOrderType"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="桌号" is-switch v-model="isDesk"></lai-cell>
				<lai-cell title="字号" is-radio v-model="kitchenData.deskSize" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="下单时间" is-switch v-model="kitchenData.showOrderDate"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="备注"></lai-cell>
				<lai-cell title="字号" is-radio v-model="kitchenData.remarkSize" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="商品信息"></lai-cell>
				<lai-cell title="字号" is-radio v-model="kitchenData.foodSize" :radiolist="sizeList.filter((v, i) => i !== sizeList.length - 1)"></lai-cell>
				<lai-cell v-if="kitchenData.billtypeId === 4" title="商品金额" is-switch v-model="kitchenData.showPrice" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="做法信息"></lai-cell>
				<lai-cell title="字号" is-radio v-model="kitchenData.taskSize" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="加料信息"></lai-cell>
				<lai-cell title="字号" is-radio v-model="kitchenData.feedSize" :radiolist="sizeList"></lai-cell>
			</view>
			<view class="bg" v-if="kitchenData.billtypeId === 4">
				<lai-cell title="订单实付金额" is-switch v-model="kitchenData.showTotal" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg">
				<lai-cell title="票头票尾设置" is-switch v-model="kitchenData.showHeadAndTail"></lai-cell>
				<lai-cell v-if="kitchenData.showHeadAndTail" isSlot title="票头内容">
					<template #default>
						<u--input v-model="kitchenData.head" :customStyle="{ padding: '0 20rpx' }" fontSize="13px" border="bottom"></u--input>
					</template>
				</lai-cell>
				<lai-cell v-if="kitchenData.showHeadAndTail" isSlot title="票尾内容">
					<template #default>
						<u--input v-model="kitchenData.tail" :customStyle="{ padding: '0 20rpx' }" fontSize="13px" border="bottom"></u--input>
					</template>
				</lai-cell>
				<lai-cell v-if="kitchenData.showHeadAndTail" title="字号" is-radio v-model="kitchenData.headAndTailSzie" :radiolist="sizeList"></lai-cell>
			</view>

			<view class="bg" v-if="kitchenData.billtypeId === 1">
				<lai-cell @clickIcon="onClickIcon" icon="question-circle" title="会员信息" is-switch v-model="kitchenData.showMember"></lai-cell>
			</view>
		</scroll-view>

		<view class="btn">
			<u-button type="primary" size="large" shape="circle" @click="submit">保存</u-button>
		</view>

		<u-modal @confirm="show = false" :show="show" :content="content" confirmText="我知道了" confirmColor="#f3c45d" width="550rpx"></u-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			type: 'payOrder', // payOrder 结账单
			isDesk: true,
			kitchenData: {
				id: 0,
				content: '',
				showStoreName: true,
				storeNameSize: 1,
				showOrderType: false,
				deskSize: 1,
				showOrderDate: false,
				remarkSize: 1,
				foodSize: 1,
				showPrice: false,
				taskSize: 1,
				feedSize: 1,
				showTotal: false,
				showHeadAndTail: true,
				head: '',
				tail: '',
				headAndTailSzie: 1,
				showMember: false,
				billtypeId: 1
			},
			sizeList: [
				{ name: '小', value: 1 },
				{ name: '中', value: 2 },
				{ name: '大', value: 3 }
			],
			show: false,
			content: '开启：会员支付订单打印会员余额   关闭：会员支付订单不打印会员余额'
		};
	},
	onLoad({ type }) {
		this.type = type;
		if (this.printTemInfo) {
			this.kitchenData = this.printTemInfo;
			// Object.keys(this.kitchenData).forEach((key) => {
			// 	if (this.printTemInfo.hasOwnProperty(key)) {
			// 		this.kitchenData[key] = this.printTemInfo[key];
			// 	}
			// });
		}
	},
	computed: {
		...mapState('printPaperSetting', ['printTemInfo'])
	},
	methods: {
		async submit() {
			await this.$api.editKitcenPrintingPaperSettingAPI(this.kitchenData);
			uni.showToast({
				title: '保存成功',
				duration: 5000,
				icon: 'success',
				success() {
					uni.navigateBack();
				}
			});
		},
		onClickIcon() {
			this.show = true;
		}
	}
};
</script>

<style scoped lang="scss">
.paper-edit {
	padding: 20rpx;
	height: 100vh;
	padding-bottom: 0;
	.edit-info {
		height: calc(100% - 40rpx - 150rpx);
	}
	.bg {
		border-radius: 10rpx;
		background: #fff;
		margin-bottom: 15rpx;
	}
	.title {
		height: 40rpx;
		font-size: 24rpx;
		color: #c7c8ca;
	}
	.btn {
		width: calc(100% + 40rpx);
		margin-left: -20rpx;
		height: 140rpx;
		padding: 0 150rpx;
		margin-top: 10rpx;
		padding-top: 10rpx;
		background-color: #fff;
	}
}
</style>
